<template>
	<div>
		<div class="nav-list-top">
			<span :class="{'list-selected':selectIndex === 'title'}" @click="listClick('title')">按主题浏览</span>
			<span :class="{'list-selected':selectIndex === 'info'}" @click="listClick('info')">按信息源浏览</span>
		</div>
		<div class="nav-list-guess">
			<p>猜你喜欢</p>
			<a href="javascript:;" v-if="titleMore" @click="titleAChange(false)" :class="{'guess-class':guessClass}">展开<i></i></a>
			<a href="javascript:;" v-else @click="titleAChange(true)" class="shou-qi">收起<i></i></a>
		</div>
		<div class="nav-list-example">
			<NavListComp :listCompData="navListData[selectIndex].guess" :contentNum="contentNum.guess"/>
		</div>
		<div class="nav-list-system">
			<p>消息系统</p>
			<a href="javascript:;" v-if="infoMore" @click="infoAChange(false)" :class="{'system-class':systemClass}">展开<i></i></a>
			<a href="javascript:;" v-else @click="infoAChange(true)" class="shou-qi">收起<i></i></a>
		</div>
		<div class="nav-list-example">
			<NavListComp :listCompData="navListData[selectIndex].system" :contentNum="contentNum.system"/>
		</div>
	</div>
</template>

<script>
  import NavListComp from '@/components/navigationComp/navListComp'
  export default {
    data () {
      return {
        navListData: {
          'info': {
          	'guess': [],
          	'system': []
          },
          'title': {
          	'guess': [],
          	'system': []
          }
        }, // 子组件的内容
        selectIndex: 'title', // 按主题浏览还是信息浏览
        titleMore: true, // 猜你喜欢展开还是收起
        infoMore: true, // 系统消息展开还是收起
        contentNum: { // 初始化内容条数
        	"guess": 21,
        	'system': 21
        },
        guessClass: true, // 猜你喜欢少于21条数据时，展开的样式
        systemClass: true // 信息系统少于21条数据时，展开的样式
      }
    },
    components: {
      NavListComp
    },
    methods: {
      // 判断数据的条数
      dataLength (temp) {
      	var systemLength = temp.navListData[temp.selectIndex].system.length
        var guessLength = temp.navListData[temp.selectIndex].guess.length
        if (guessLength < 21){
        	temp.contentNum.guess = guessLength
        	temp.guessClass = true
        } else {
        	temp.contentNum.guess = 21
        	temp.guessClass = false
        }
        if (systemLength < 21){
        	temp.contentNum.system = systemLength
        	temp.systemClass = true
        } else {
        	temp.contentNum.system = 21
        	temp.systemClass = false
        }
      },
      // 主题浏览和信息浏览切换
      listClick (value) {
        var that = this
        that.selectIndex = value
        that.titleMore = true
        that.infoMore = true
        that.dataLength(that)
      },
      // 猜你喜欢展开收起切换
      titleAChange (value) {
      	var that = this
      	// 判断猜你喜欢展现的数据条数
      	var guessLength = that.navListData[that.selectIndex].guess.length
      	if (guessLength > 21) {
      		that.titleMore = value
      		if (!that.titleMore) {
      		   that.contentNum.guess = guessLength
      		} else {
      		   that.contentNum.guess = 21	
      		}
      	} else {
      		that.titleMore = true
      		that.contentNum.guess = 21
      	}
      },
      // 消息系统展开收起切换
      infoAChange (value) {
      	var that = this
      	var systemLength = that.navListData[that.selectIndex].system.length
      	// 判断消息系统展现的数据条数
      	if (systemLength > 21) {
      		that.infoMore = value
      		if (!that.infoMore) {
      		   that.contentNum.system = systemLength
      		} else {
      		   that.contentNum.system = 21	
      		}
      	} else {
      		that.infoMore = true
      		that.contentNum.system = 21
      	}
      }
    },
    created () {
      // 获取json里面的数据
      var that = this
      that.$http.get('../../../../static/json/navList.json')
      .then(res => {
        var data = res.data.data
        that.navListData = data
        // 判断数据是否大于21条
        that.dataLength(that)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
</script>

<style>
	@import "../../../../../static/navChildren/navList.css";
</style>